<template>
  <div :style="{ height: $store.getters.scrollerHeight() }" class="generatemode__tabs">
    <avue-data-card :option="option"></avue-data-card>
    <!-- 拟态窗口 -->
    <EntityDev v-if="isEntityDevelop" @close="() => {this.isEntityDevelop = false;}"/>
    <RapidDev v-if="isRapidDevelop" @close="() => {this.isRapidDevelop = false;}"/>
  </div>
</template>

<script>
import img from "@/assets/images/entityDev.png";
import EntityDev from "./EntityDev";
import RapidDev from "./RapidDev";
export default {
  name: "wel",
  components: { EntityDev, RapidDev },
  data() {
    return {
      isEntityDevelop: false,
      isRapidDevelop: false,
    };
  },
  computed: {
    option() {
      return {
        span: 8,
        data: [
          {
            click: (item) => {
              this.isEntityDevelop = true;
            },
            name: "实体开发",
            src: img,
            text: "根据数据库快速生成数据持久化模型。"
          },
          {
            click: (item) => {
              this.isRapidDevelop = true;
            },
            name: "单表快速开发",
            src: img,
            text: "通过设置快速生成单表业务的增删查改功能。"
          },
        ],
      };
    },
  },
  created() {},
  methods: {},
};
</script>

<style >
.generatemode__tabs{
  padding: 24px;
}
.generatemode__tabs .data-card .item{
  width: 300px;
  height: 320px;
  border: solid 1px;
}
.generatemode__tabs .data-card .item-text{
  top: 270px;
  padding: 15px 15px;
}
.generatemode__tabs .data-card .item-text h3{
  font-weight: bold;
  font-size: 25px;
}
.generatemode__tabs .data-card .item-text p{
  margin-top: 10px;
  font-size: 15px;
}
</style>
